<template>
  <div class="login-page">
    <div class="login-form">
      <div class="form-layout">
        <div class="title">艾迪研一体化平台</div>
        <!-- 表单 -->
        <el-form :model="loginForm" :rules="rules" ref="loginForm">
          <el-form-item prop="username">
            <el-input class="user" clearable v-model="loginForm.username" placeholder="请输入用户名"></el-input>
          </el-form-item>
          <el-form-item prop="password">
            <el-input
              type="password"
              class="password"
              v-model="loginForm.password"
              placeholder="请输入密码"
              show-password
            ></el-input>
          </el-form-item>
        </el-form>
        <!-- 按钮 -->
        <el-button
          @click="loginin"
          v-loading.fullscreen.lock="fullscreenLoading"
          element-loading-text="登录中"
          type="primary"
          element-loading-spinner="el-icon-loading"
        >登录</el-button
        >
      </div>
    </div>
  </div>
</template>
<script>
import { mapActions } from 'vuex'

export default {
  data() {
    return {
      verifyUrl: '',
      loginForm: {
        username: '',
        password: '',
      },
      rules: {
        username: [{ required: true, message: '用户名不得为空', trigger: 'blur' }],
        password: [{ required: true, message: '密码不得为空', trigger: 'blur' }],
      },
      fullscreenLoading: false,
    }
  },
  mounted() {
    sessionStorage.clear()

    document.addEventListener('keyup', this.onKeyupToLogin, false)
  },
  beforeDestroy() {
    document.removeEventListener('keyup', this.onKeyupToLogin, false)
  },
  methods: {
    ...mapActions('userData', ['loginVerify', 'qryUserInfoByToken', 'getPermissionInfo']),

    onKeyupToLogin(e) {
      if (e.keyCode === 13) {
        this.loginin()
      }
    },

    // 登录操作
    async loginin() {
      await this.$refs.loginForm.validate()
      this.fullscreenLoading = true
      const data = {
        ...this.loginForm,
      }
      const res = await this.loginVerify({ data })
      if (res.code === 200) {
        // 保存token
        this.$store.commit('userData/setToken', res.data.token)
        // 获取登录用户信息
        const result = await this.getPermissionInfo()
        console.log('result', result)
        localStorage.setItem('user-roles', JSON.stringify(result.data.roles))
        localStorage.setItem('user-permissions', JSON.stringify(result.data.permissions))
        this.$store.commit('userData/setUserInfo', result.data)
        localStorage.setItem('showMenuType', 1)
        // 清除页面标签栏
        this.$store.dispatch('tagsView/delAllViews')
        this.getUserInfoByToken()
        // if (result.data.permissions && result.data.permissions.length > 0) {
        // } else {
        //   this.$message.error('登录权限异常，请联系管理员~')
        //   this.fullscreenLoading = false
        //   return ''
        // }
      } else {
        this.fullscreenLoading = false
      }
    },

    handleReset() {
      this.loginForm = {}
    },

    // 查询用户信息
    getUserInfoByToken() {
      this.qryUserInfoByToken().then(res => {
        const { code, data } = res
        if (code === 200 && data.id) {
          localStorage.setItem('user-info', JSON.stringify(data))
          // 路由跳转
          this.$router.push({
            path: '/edc/project-list',
            name: '项目中心',
          })
        } else {
          this.$message.error('登录信息超时，请重新登录~')
          localStorage.clear()
          sessionStorage.clear()
          this.$router.push({
            path: '/login',
          })
        }
      })
    },
  },
}
</script>

<style lang="scss">
@import './index.scss';
</style>
